<template>
  <PageContainer title="直播房间管理">
    <template v-slot:extra>
      <el-input v-model="roomNumber" style="width: 300px;white-space: nowrap;" size="large"
                placeholder="请输入要查询的房间号"/>
      <el-button size="large" style="margin-left: 10px;" type="primary" @click="getById">查询</el-button>
      <el-button size="large" style="margin-left: 10px;" type="primary" @click="onset">重置</el-button>
      <!-- 添加直播间 -->
      <AddLiveRoom></AddLiveRoom>
    </template>
    <div class="mid">
      <LiveRoomItem v-for="item in liveRoomList"
                    :item="item"
                    :delete-item="deleteById"></LiveRoomItem>
    </div>

    <template v-if="total==0">
      <el-empty description="没有数据" style="height: 100%"></el-empty>
    </template>

    <div v-if="total!=0" class="page">
      <el-pagination :page-sizes="[2, 4, 6, 8]" layout="total, sizes, prev, pager, next,jumper" :total="total"
                     v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle"/>
    </div>

    <el-dialog v-model="imgVisible" width="50%">
      <img :src="imgUrl" style="width: 100%;height: 100%;" alt="">
    </el-dialog>

    <el-dialog v-model="visible" width="50%">
      <h1>未找到直播间！！！！！！！</h1>
    </el-dialog>
  </PageContainer>
</template>

<script setup lang="ts">
import {getLiveRoom, getLiveRoomByLiveRoomId, deleteLiveRoom} from '@/service/api'
import PageContainer from '@/components/PageContainer.vue';
import AddLiveRoom from './components/addLiveRoom.vue'
import {ref, provide, onMounted} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import LiveRoomItem from "@/views/home/liveRoom/components/LiveRoomItem.vue";


const roomNumber = ref('')
const imgVisible = ref(false)
const total = ref(1)
const imgUrl = ref("")
const visible = ref(false)

const liveRoomList = ref<any>([])
const params = ref({
  pageNum: 1,
  pageSize: 4,
})
onMounted(() => {
  getLiveRoomList();
})

// 获取直播间列表
const getLiveRoomList = async () => {
  const res = await getLiveRoom(params.value)
  console.log(res.data);
  liveRoomList.value = res.data.data.list
  total.value = res.data.data.total
}

provide('getLiveRoomList', getLiveRoomList)
//根据房间号搜索直播间
const getById = async () => {
  const res = await getLiveRoomByLiveRoomId({
    roomNumber: roomNumber.value
  })
  if (roomNumber.value !== '') {
    const liveRoom = res.data.data
    console.log(liveRoom);
    if (liveRoom) {
      liveRoomList.value = [liveRoom]
      params.value.pageNum = 1
    } else {
      visible.value = true;
      liveRoomList.value = []
    }
  } else {
    ElMessage.error('请输入房间号！！！')
  }
}

//重置
const onset = () => {
  params.value.pageNum = 1 //重置页面
  roomNumber.value = ''
  getLiveRoomList()
}
//分页，每页条数
const pageSizeChangeHandle = (val: number) => {
  params.value.pageSize = val;
  params.value.pageNum = 1;
  getLiveRoomList();
}
//分页，当前页
const pageCurrentChangeHandle = (val: number) => {
  params.value.pageNum = val;
  getLiveRoomList();
}
//注销直播间
const deleteById = async (row: any) => {
  await ElMessageBox.confirm('是否删除直播间信息', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await deleteLiveRoom({
    liveRoomId: row.id
  })
  ElMessage.success('删除成功')
  await getLiveRoomList()
}
</script>


<style scoped>
.mid {
  display: flex;
  flex-flow: wrap;
  width: 100%;
  height: 100%;
  gap: 30% 5%;

}

.page {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  top: 90%
}

:deep(.el-icon svg) {
  height: 0.7em;
}

</style>